<template>
	<div class="listimg">
		<Row v-show="upArea">
			<ICol span="19" class="tip" >
				建议尺寸：900像素 * 500像素，已关闭图片水印 
			</ICol>
			<ICol span="3" >
				<Upload 
                :action="upload" 
                name="pic" 
                accept="image/*" 
                :data="updata" 
                :format="['bmp','png','jpeg','jpg','gif']" 
                :max-size="2048" :on-progress="onProgress" 
                :show-upload-list="false" 
                :on-success="onSuccess" 
                :on-error="onError">
                    <Button icon="ios-cloud-upload-outline" class="uploadSingle">本地上传</Button>
                </Upload>
                <IProgress v-show="percent>0" :percent="percent" :stroke-width="10" hide-info status="active"></IProgress>
			</ICol>
		</Row>
		<Row>
            <ul v-if="images.length >0">
                <li v-for="(image,index) in images" :key="image.id" class="li" v-on:click.stop="choise(image.url,index)">
                    <div class="mask" v-show="image.display" v-on:click.stop="cancelChoise(index)">
                        <div class="selected_mask_inner"></div>
                        <Icon type="md-checkmark" class="check"></Icon>
                    </div>
                    <div  class="img"><img :src="image.url"></div>
                    <span class="name" :title="image.name">{{image.name}}</span>
                </li>
            </ul>
            <ICol v-else span="24" style="text-align:center;line-height:150px;">
                {{nodata}}
            </ICol>
		</Row>
		<Page :current="page" :page-size="20" :total="total" @on-change="changePage" simple class="page" v-show="images.length>0"></Page>
	</div>
</template>
<script>
	import {Row,Col,Page,Button,Icon,Upload,Progress} from 'view-design';

	export default{
		components:{
			Row,
            'ICol':Col,
            Button,
            Page,
            Icon,
            Upload,
            'IProgress' :Progress,
        },
        props :{
            //图片上传成功
            callback:{
                type: Function,
                required : true,
            },
            //选中或取消选中
            choiseBack:{
                type: Function,
                required : true,  
            }
        },
        data(){
        	return {
                updata : {
                    
                    fileArea : 'wechat',//上传图片空间
                },
        		page: 1,
                total : 0,
                wechatImageGroupId : -1,//图片默认分组ID
                upload : '',
        		images : [],
                nodata : '',
                choiseUrl : '' ,
                choiseImageId : 0,
                percent : 0,
                upArea: false,
        	}
        },
        methods :{
        	//获取分组数据
        	getImages(){
                var param = {
                    page : this.page,
                    total : this.total,
                    size : 20,
                    wechat_image_group_id : this.wechatImageGroupId,
                }
        		this.Axios.Wechat.Manager.Material.Image.List(param)
                .then(res =>{
                    if(!res) return false;
                    this.upArea = true;
                    var data= res.data;
                    this.total = data.total;
                    this.images = [];
                    if(!data.list){
                        this.nodata = '该分组暂时没有图片素材';
                        return false;
                    }
                    for(var i in data.list){
                        data.list[i].display = false;
                    }
                    this.images = data.list;

                })
        	},
        	//重置列表状态
        	reset(){
        		this.total = 0;
                this.images = [];
                this.wechatImageGroupId = -1;
                this.nodata = '';
                this.upArea = false;
        	},
            //选择图片
            choise(url,index){
                for(var i in this.images){
                    this.images[i].display = false;
                }
                this.images[index].display = true;
                this.choiseUrl = url;
                this.choiseImageId = this.images[index].id;
                this.choiseBack();
            },
            //取消选中
            cancelChoise(index){
                this.images[index].display = false;
                this.choiseUrl = '';
                this.choiseImageId = 0;
                this.choiseBack();
            },
            //分页
            changePage(page){
                this.page = page;
                this.getImages();
            },
            //上传进度
            onProgress(event, file, fileList){
                this.percent = event.percent;
            },
            //图片上传成功
            onSuccess(response, file, fileList){
                if(response.code!=0){
                    this.$Message.error(response.msg);return false;
                }
                this.getImages();
                this.callback();
                this.percent = 0;
                this.choiseUrl = '';
                this.choiseImageId = 0;
                this.choiseBack();
            },
            //图片上传失败
            onError(error, file, fileList){
                this.$Message.error('上传失败,请重新上传');
            },
        },
        created: function() {
            this.upload = '/wechat/manager/material/update/image?wechat_image_group_id='+this.wechatImageGroupId;
        },
        watch:{
            wechatImageGroupId :function(vue){
                this.upload = '/wechat/manager/material/update/image?wechat_image_group_id='+this.wechatImageGroupId;
            }
        }
	}
</script>
<style>
    .listimg{overflow-y: auto; overflow-x: hidden; height: 500px;}
	.listimg .tip{line-height: 30px;text-align: right; padding-right: 10px;}
    .listimg .help{font-size: 16px;cursor: pointer;font-size: 20px;}
    .listimg ul{margin-top: 15px;}
    .listimg .li{float: left;margin-bottom: 10px;margin-right: 20px;width: 125px; height: 180px; overflow: hidden;text-overflow:ellipsis; white-space: nowrap;border:1px solid #dddee1;}
	.listimg .img{width:125px; height: 132px; overflow: hidden;  position: relative;cursor:pointer;}
	.listimg .img img{position: absolute; left: 50%; top: 50%; height: 169px; transform: translate(-50%,-50%);}
    .listimg .name{display: block; overflow: hidden; width: 100%; line-height: 32px; padding: 0 9px; text-overflow: ellipsis; white-space: nowrap;}
	.listimg .page{text-align:right;margin-top:15px;margin-right: 30px;}
    .listimg .mask{position: absolute;margin-top: 0; margin-left: 0; z-index: 1;cursor: pointer;}
    .listimg .mask .selected_mask_inner{width: 123px; height: 132px; -moz-opacity: .6; -khtml-opacity: .6; opacity: .6; background-color: #000; filter: alpha(opacity=60);}
    .listimg .mask .check{color: #f8f8f9; top: 0; left: 0; text-align: center; width: 130px; height: 132px; line-height: 132px; display: inline-block; background-position: 50% 50%; position: absolute; z-index: 1; font-size: 47px;}
    .listimg .uploadSingle{width: 123px;}
</style>